<script lang="ts" setup>
import { ref } from "vue"
import { User, Lock } from '@element-plus/icons-vue'

const user = ref({})
const value = ref('')
const getCaptcha = () => {
    console.log('获取验证码')
}
const reg = () => {
    console.log(user.value)
}
</script>


<template>
    <el-card style="width: 400px;height: 420px; margin: 100px auto;">
        <h1 style="text-align: center">讯飞人工智能教育系统</h1>
        <el-form style="margin-top: 20px;">

            <el-form-item>
                <el-upload v-model:file-list="fileList" class="upload-demo"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :on-change="handleChange">
                    <el-button type="primary">点击上传本人照片</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            jpg/png文件，大小不超过500kb
                        </div>
                    </template>
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="user.telephone"></el-input>
            </el-form-item>

            <el-form-item>
                <el-select v-model="value" placeholder="请选择你的身份" style="width: 100%">
                    <!-- <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      /> -->
                    <el-option label="学生" value="学生"></el-option>
                    <el-option label="老师" value="2"></el-option>
                    <el-option label="管理" value="3"></el-option>

                </el-select>
            </el-form-item>

            <el-form-item>
                <el-input placeholder="请输入密码" :prefix-icon="Lock"></el-input>
            </el-form-item>

            <el-form-item>
                <el-input placeholder="请输入手机号" :prefix-icon="Lock"></el-input>
            </el-form-item>

            <el-form-item>
                <div class="flex-container">
                    <el-input :prefix-icon="Lock" type="password" placeholder="请填写验证码" v-model="user.captcha"
                        @keydown.enter="reg()" style="width: 250px;"></el-input>
                    <span class="captcha-button">
                        <el-button type="primary" @click="getCaptcha()">获取验证码</el-button>
                    </span>
                </div>
            </el-form-item>

            <el-form-item>

                <el-button style="width: 100%;" type="primary" @click="reg()">注册</el-button>
            </el-form-item>
        </el-form>
        <div style="margin-top: 5px; margin-left:10px;">
            <router-link to="/login" style="color:black;  text-decoration: none; ">«返回</router-link>

        </div>


    </el-card>
</template>
<style lang="scss" scoped>
.flex-container {
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
    /* 使按钮与输入框垂直居中对齐 */
}

.captcha-button {
    margin-left: 10px;
    /* 调整间距，可以根据需要更改这个值 */
}
</style>